<template>
  <el-card>
    <template #header>
      <div style="float: right">
        <el-button @click="saveCoding" type="primary">提 交</el-button>
      </div>
    </template>
  </el-card>
  <el-scrollbar :height="height">
    <ts-card header="基本信息">
      <el-form :model="form" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="对象属性名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="编码字段名">
              <el-input v-model="form.fieldName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="表名">
              <el-input v-model="form.tableName" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="执行的方法集合">
              <el-select
              style="width:100%"
                v-model="form.matchMethodsArray"
                clearable
                placeholder="请选择："
                multiple
              >
                <el-option
                  v-for="item in configData.methodList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="生成编码数">
              <el-input-number v-model="form.generateNums" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="自动生成编码">
              <el-switch v-model="form.autoHandle" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ts-card>
    <ts-card header="规则列表">
        <template #header>
          <i style="float: right; margin-right: 10px" @click="addCodeRule">
            <el-icon>
              <Plus />
            </el-icon>
          </i>
        </template>
        <draggable v-model="dataList" animation="700">
          <template #item="{ item, index }">
            <ts-card   style="margin-bottom: 20px">
              <template #header>
              <div style="display:flex;justify-content: space-between;">
              <div style="display:flex;align-items: center;"  >
              <span>规则{{ index + 1 }}</span>
              <el-form-item label="规则类型" style="margin-bottom:0;margin-left:10px">
                  <el-select
                    v-model="dataList[index].codeRuleType"
                    clearable
                    placeholder="请选择："
                    @change="codeRuleChange(index, $event)"
                  >
                    <el-option
                      v-for="item in configData.codeRuleTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <el-button
                  style="float: right"
                  @click="deleteCodeRule(index)"
                  type="danger"
                  :icon="Delete"
                  circle
                />
            </div>

            </template>
              <sc-form
                v-if="dataList[index].formConfig"
                v-model="dataList[index]"
                ref="formRef"
                :config="dataList[index].formConfig"
              >
              </sc-form>
            </ts-card>
          </template>
        </draggable>
      </ts-card>
    </el-scrollbar>
</template>
  <script setup>
import { ref, defineModel, computed, onMounted, inject } from "vue";
import { ElNotification } from "element-plus";
import API from "@/api/model/meta.js";
import { getFormConfig } from "./formConfig";
import { Plus, Delete } from "@element-plus/icons-vue";
const emit = defineEmits(["update", "init"]);
const form = defineModel();
const dataList = defineModel('dataList')
const props = defineProps({
  configData: { type: Array, default: [] },
  addTemplate: { type: Object, default: {} },
});
const fileName =inject('fileName')
const height = computed(()=>{
  let h;
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if (!iOS) {
    h = window.innerHeight;
  } else {
    h = screen.height;
  }
  return h-145
})
onMounted(()=>{
  dataList.value.forEach(ele=>{
    if(ele.codeRuleType){
      ele.formConfig = getFormConfig(ele.codeRuleType,props.configData)
    }
  })
})
const codeRuleChange = (index,val)=>{
  if(val){
    dataList.value[index].formConfig = getFormConfig(val,props.configData)
  }
  
}
const addCodeRule = () => {
  dataList.value.push(props.addTemplate);
};
const deleteCodeRule = (index) => {
  dataList.value.splice(index, 1);
};
const saveCoding = async () => {
  let param = {
    fileName: fileName.value,
    bean: form.value,
    dataList:dataList.value.map(ele=>{
      delete ele.formConfig
      return ele
    })
  };
  console.log(param)
  let res =await API.businessrule.saveOrUpdateCode.post(param);
  if (res.code == 200) {
    ElNotification.success({
      title: "",
      message: "操作成功！",
      duration: 2000,
    });
    emit("update",{fieldId:res.fieldId});
    emit("init");
  }
};
</script>
  <style lang="less" scoped></style>
  